<template>
    <div>
      <table-expand
        ref="table"
        :columns="columns"
        :data="data"
        :loading="loading"
        :config="config"
        :pageSizeOpts="pageSizeOpts"
        :pageNavigation="pageNavigation"
        :queryFormItem="queryFormItem"
        :collapseFormItem="collapseFormItem"
        :additionalAction="additionalAction"
        :pageAdditionalAction="pageAdditionalAction"
        :orderBy="orderBy"
        @loadPage="loadPage"
        @handleCreate="handleCreate"
        @handleDetail="handleDetail"
        @handleEdit="handleEdit"
        @handleDelete="handleDelete"
        @handleDeleteMultiple="handleDeleteMultiple"
        @handleSearch="handleSearch"
        @handleReset="handleReset"
      ></table-expand>
    </div>
</template>

  <script>
    import tableExpand from '@/pages/components/tableExpand.vue';
    import { typeClassName } from '@/pages/config/classNameMap';
    import mixin from '@/pages/components/mixins/mixin'
    import columnsMixin from './config'
    export default {
        components: { tableExpand },
        name: 'material',
        mixins: [mixin,columnsMixin],
        data () {
            return {
                classObject: null, // 单个实例
                collectionObject: null, // 所有实例
                className: typeClassName['materialDetail'].className,
                type: typeClassName['materialDetail'].type,
                modelType: typeClassName['materialDetail'].modelType,
                rules: {
                    sf_code: [
                        { required: true, message: '不能为空', trigger: 'blur' }
                    ],
                    sf_name: [
                        { required: true, message: '不能为空', trigger: 'blur' }
                    ]
                },
                loading: false,
                config: {
                    search: true,
                    addButton: false,
                    batchDeleteButton: false,
                    tableSizeIcon: true,
                    fullscreenIcon: true,
                    refreshIcon: false,
                    columnSettingIcon: true,
                    action: false,
                    additionalAction: false,
                    pageAdditionalAction: true

                },
                pageSizeOpts: [10, 30, 50, 100],
                pageNavigation: { total: 0, pageSize: 10, pageNumber: 1 },
                orderBy:{asc:['sf_categoryName']},
            };
        },
        computed: {
            additionalAction () {
                return {};
            },
            pageAdditionalAction () {
                return {
                    width: 200,
                    align: 'center',
                    buttons: [
                        { title: {
                              'zh-CN': '同步',
                              'en-US': 'sync'
                          }[this.G_Locale],
                          event: (row, index) => this.syncData(row, index)
                        },
                    ]
                }
            },
            data () {
                if (!!this.collectionObject) {
                    return this.collectionObject.records.map(d => {
                        return {
                            ...d,
                            ...d.values
                        }
                    })
                } else {
                    return [];
                }
            }
        },
        beforeMount () {
            this.collectionObject = this.$modelObject.create(`${this.modelType}Collection`);
            this.classObject = this.$modelObject.create(this.modelType);
            this.loadPage(this.pageNavigation, null, this.orderBy);
        },
        mounted () {},
        methods: {
            syncData () {
                this.$api.Custom.syncMaterial().then().finally(()=>{
                    this.loadPage(this.pageNavigation, null, this.orderBy);
                })
            },
        }
    };
  </script>
  <style scoped lang="scss"></style>
